<template>
    <div class="goods">
        <div class="goods-left">
            <div class="img-box">
                <img :src="imgUrl" alt="">
            </div>
            <div class="info">
                <p class="goods-name">{{tit}}</p>
                <p class="owner">拥有者 <span>{{goodsObj.owner.nickname}}</span> </p>
                <p>价格：{{goodsObj.price}}鹅币</p>
            </div>
        </div>
        <div class="goods-right">
            <p>点击购买</p>
        </div>
    </div>
</template>
<script>
export default {
    name:"Goods",
    props:{
        goodsObj:{
            type:Object
        },
        type:{
            type:String
        }
    },
    data(){
        return{
            imgUrl:"",
            tit:""
        }
    },
    mounted(){
        if(this.type =="card"){
            this.imgUrl = this.goodsObj.card.image;
            this.tit = this.goodsObj.card.title;
        }else if(this.type =="goose"){
            this.imgUrl = this.goodsObj.goose.imageUrl;
            this.tit = "鹅";
        }
        
    }
}
</script>
<style lang="scss" scoped>
.goods{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px;
    margin-bottom: 10px;
    .goods-left,
    .goods-right{
        p{
            font-size: 12px;
            color: #999;
        }
    }
    .goods-left{
        display: flex;
        .img-box{
            margin-right: 15px;
            img{
                width: 45px;
                border-radius: 8px;
                box-shadow: 4px 4px 5px 0 rgb(180, 179, 179);
            }
        }
        .info{
            .goods-name{
                color: #333;
                font-size: 14px;
                margin-top: 3px;
            }
            .owner{
                margin: 10px 0 ;
                span{
                    color: rgb(84, 175, 133);
                }
            }
        }
    }
    .goods-right{
        p{
            margin-bottom: 10px;
        }
    }
}
</style>